<template>
  <a-scrollbar style="height: calc(100vh - @menuHeight); overflow: auto; background-color: white">
    <div class="person-info-con">
      <div class="company-info" style="width: 1200px" v-if="userInfo.admin">
        <div class="title-bar">企业信息</div>
        <a-descriptions :data="companyData" align="left" :column="2" style="margin: 5px 10px" :label-style="{ textAlign: 'right' }">
          <template #label="{ label }">
            <div>{{ label }}：</div>
          </template>
          <template #value="{ value, data }">
            <div v-if="data.label == '公司名称'">{{ companyInfo.companyName ? companyInfo.companyName : '--' }}</div>
            <div v-else-if="data.label == '统一社会信用代码'">{{ companyInfo.socialCreditCode ? companyInfo.socialCreditCode : '--' }}</div>
            <div v-else-if="data.label == '简称'">{{ companyInfo.companyShortName ? companyInfo.companyShortName : '--' }}</div>
            <div v-else-if="data.label == '主营行业'">{{ companyInfo.companyIndustry ? companyInfo.companyIndustry : '--' }}</div>
            <div v-else-if="data.label == '编号'">{{ companyInfo.companyCode ? companyInfo.companyCode : '--' }}</div>
            <div v-else-if="data.label == '企业规模'">{{ companyInfo.companyScale ? companyInfo.companyScale : '--' }}</div>
            <div v-else-if="data.label == '入驻日期'">{{ $setTime(companyInfo.gmtCreate) }}</div>
            <div v-else-if="data.label == '公司地址'">{{ companyInfo.address ? companyInfo.address : '--' }}</div>
            <div v-else-if="data.label == '应用版本'">
              <div v-if="companyInfo.companyAppList">
                <div v-for="item of companyInfo.companyAppList" :key="item.id">
                  <span>{{ menuAppMap[item.menuApp] }}-{{ menuVerMap[item.menuVer] }} ({{ getTime(item) }})</span>
                </div>
              </div>
              <div v-else>--</div>
            </div>
            <div v-else-if="data.label == '主管理员'">
              <div>姓名：{{ companyInfo.adminUname ? companyInfo.adminUname : '--' }}</div>
              <div>用户名：{{ companyInfo.adminLoginName ? companyInfo.adminLoginName : '--' }}</div>
            </div>
            <div v-else-if="data.label == '营业执照'">
              <div v-if="companyInfo.businessLicensePicList">
                <a-image-preview-group infinite>
                  <a-space>
                    <a-image v-for="item of companyInfo.businessLicensePicList" :key="item" :src="item" width="60" />
                  </a-space>
                </a-image-preview-group>
              </div>
            </div>
            <div v-else>--</div>
          </template>
        </a-descriptions>
      </div>
      <div class="bypass-account">
        <div class="title-bar">子账号信息</div>
        <a-descriptions :data="bypassData" align="left" :column="1" style="margin: 5px 10px" :label-style="{ textAlign: 'right' }">
          <template #label="{ label }">
            <div>{{ label }}：</div>
          </template>
          <template #value="{ value, data }">
            <div v-if="data.label == '头像'">
              <UplaodImg :limit="1" v-model="headerImage" @uploadSuccess="uploadSuccess" />
            </div>
            <div v-if="data.label == '姓名'">{{ userInfo.userName ? userInfo.userName : '--' }}</div>
            <div v-if="data.label == '所在部门'">{{ userInfo.deptName ? userInfo.deptName : '--' }}</div>
            <div v-if="data.label == '拥有角色'">{{ getRoleName(userInfo.roleList) }}</div>
            <div v-if="data.label == '数据权限组'">{{ getPreName(userInfo.dataPermissonList) }}</div>
            <div v-if="data.label == '手机号'">
              <a-space>
                <div>{{ userInfo.mobile }}</div>
                <a-button type="text" @click="showUpdateMobile = true">修改手机号</a-button>
              </a-space>
            </div>
            <div v-if="data.label == '用户名'">
              <a-space>
                <div>{{ userInfo.loginName }}</div>
                <a-button type="text" @click="showUpdatePwd = true">修改登录密码</a-button>
              </a-space>
            </div>
            <div v-if="data.label == '注册时间'">{{ $setTime(userInfo.gmtCreate) }}</div>
          </template>
        </a-descriptions>
      </div>
      <div class="available-equity">
        <div class="title-bar">可用权益</div>
        <div class="clearfix" style="margin: 5px 10px; width: 100%">
          <div class="equity-item fl">
            <div class="text-desc">订单(单/月)</div>
            <div class="text-num">{{ $extract(companyInfo, 'companyEquity.equityUse.orderNum') }}/{{ $extract(companyInfo, 'companyEquity.equity.orderNum') }}</div>
          </div>
          <div class="equity-item fl">
            <div class="text-desc">可授权店铺</div>
            <div class="text-num">{{ $extract(companyInfo, 'companyEquity.equityUse.shopNum') }}/{{ $extract(companyInfo, 'companyEquity.equity.shopNum') }}</div>
          </div>
          <div class="equity-item fl">
            <div class="text-desc">子账号数</div>
            <div class="text-num">{{ $extract(companyInfo, 'companyEquity.equityUse.childAccountNum') }}/{{ $extract(companyInfo, 'companyEquity.equity.childAccountNum') }}</div>
          </div>
          <div class="equity-item fl">
            <div class="text-desc">ChatGPT会话剩余点数</div>
            <div class="text-num">{{ $extract(companyInfo, 'companyEquity.equityUse.chatGptNum') }}/{{ $extract(companyInfo, 'companyEquity.equity.chatGptNum') }}</div>
            <div class="used">已用量:{{ $extract(companyInfo, 'companyEquity.equityUse.chatGptNum') }}</div>
          </div>
          <div class="equity-item fl">
            <div class="text-desc">设计服务金余额</div>
            <div class="text-num">{{ $extract(companyInfo, 'companyEquity.equityUse.designServiceAmount') }}/{{ $extract(companyInfo, 'companyEquity.equity.designServiceAmount') }}</div>
            <div class="used">总花费:¥{{ $extract(companyInfo, 'companyEquity.equityUse.designServiceAmount') }}</div>
          </div>
        </div>
      </div>
    </div>
  </a-scrollbar>
  <UpdateMobile v-if="showUpdateMobile" v-model="showUpdateMobile" :id="userInfo.id" @save="getUserCenterInfo" />
  <UpdatePwd v-if="showUpdatePwd" v-model="showUpdatePwd" :id="userInfo.id" @save="getUserCenterInfo" />
</template>

<script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue'
  import { getUserCenter, updateUserHeaderImage } from '@/api/system'
  import UplaodImg from '@/components/uploadImg.vue'
  import UpdateMobile from './updateMobile.vue'
  import UpdatePwd from './updatePwd.vue'
  import dayjs from 'dayjs'
  import { Message } from '@arco-design/web-vue'
  const menuAppMap = {
    DEALER: '经销商',
    SUPPLIER: '供应商',
    DESIGN_SERVICER: '设计服务商',
  }
  const menuVerMap = {
    FEE: '免费版',
    FIRM: '企业版',
    STANDARD: '标准版',
  }
  let companyData = ref([
    {
      label: '公司名称',
      value: 'Socrates',
    },
    {
      label: '统一社会信用代码',
      value: '123-1234-1234',
    },
    {
      label: '简称',
      value: '公司名称：',
    },
    {
      label: '主营行业',
      value: 'Beijing',
    },
    {
      label: '编号',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '企业规模',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '入驻日期',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '公司地址',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '应用版本',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '营业执照',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '主管理员',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
  ])
  let bypassData = ref([
    {
      label: '头像',
      value: 'Socrates',
    },
    {
      label: '姓名',
      value: '123-1234-1234',
    },
    {
      label: '所在部门',
      value: '公司名称：',
    },
    {
      label: '拥有角色',
      value: 'Beijing',
    },
    {
      label: '数据权限组',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '手机号',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '用户名',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
    {
      label: '注册时间',
      value: 'Yingdu Building, Zhichun Road, Beijing',
    },
  ])
  let companyInfo: any = ref({})
  let userInfo: any = ref({})
  let headerImage = ref('')
  let showUpdateMobile = ref(false)
  let showUpdatePwd = ref(false)

  const getUserCenterInfo = async () => {
    const res: any = await getUserCenter()
    if (res) {
      companyInfo.value = res.data.company
      userInfo.value = res.data.user
      headerImage.value = res?.data?.user?.headerImage
    }
  }

  const getTime = (info: any) => {
    if (info.isForever) return `永久`
    let start = dayjs(info.gmtCreate).format(`YYYY年MM月DD日`)
    let end = dayjs(info.gmtValidity).format(`YYYY年MM月DD日`)
    return `${start}-${end}`
  }

  const getRoleName = (list: any) => {
    if (!list) return '--'
    let roleArr = list || []
    return roleArr.map((e: any) => e.roleName).join(',')
  }
  const getPreName = (list: any) => {
    if (!list) return '--'
    let preArr = list || []
    return preArr.map((e: any) => e.name).join(',')
  }

  const uploadSuccess = async () => {
    console.log(headerImage.value)
    let params = {
      id: userInfo.value.id,
      headerImage: headerImage.value,
    }
    await updateUserHeaderImage(params)
    Message.success('用户头像更换成功')
    getUserCenterInfo()
  }

  onMounted(() => {
    getUserCenterInfo()
  })
</script>

<style lang="less" scoped>
  .available-equity {
    padding-bottom: 10px;
  }
  .person-info-con {
    width: 100%;
    height: calc(100vh - @menuHeight);
    padding: 10px 20px;

    :deep(.arco-upload-picture-card) {
      min-width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    :deep(.arco-upload-list-picture) {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    :deep(.arco-upload-list-picture-operation) {
      line-height: 60px;
    }

    .equity-item {
      width: 200px;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      height: 90px;
      padding: 5px;
      margin-right: 30px;
      .text-desc {
        color: #86909c;
      }
      .text-num {
        font-size: 20px;
        margin-top: 5px;
        font-weight: 700;
      }

      .used {
        font-size: 14px;
        color: #a2e7ff;
      }
    }
  }
</style>
